<template>
  <div id="home_box">
    <div class="header_box">
      <el-menu
          mode="horizontal"
          class="el-menu-demo"
          text-color="#409eff"
          :default-active="defaultActive"
          active-text-color="#1989fa"
      >
        <el-menu-item v-for="item in $router.options.routes[1].children" :index="item.path" :key="item.path" @click="goRouter(item)">
          <span>{{ item.meta.title }}</span>
        </el-menu-item>
      </el-menu>
    </div>

    <el-main class="index_container">
      <div class="cate">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </div>
    </el-main>


    <el-footer>

    </el-footer>
  </div>
</template>
<script>

  export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "index",
    data() {
      return {

      }
    },
    computed: {
      defaultActive: function(){
        return this.$route.path;
      }
    },
    mounted() {

    },
    methods: {
      goRouter(item) {
        this.$router.push({path: item.path})
      }
    }
  }
</script>

<style lang="scss" scoped>
  #home_box {
    .header_box {
      display: flex;
      justify-content: center;
      border-bottom: 1px solid #dee2e6;

      .el-menu-demo {
        width: 55%;
        margin: 0 auto;
      }
    }

    .index_container {
      background-color: #f1f1f1;

      .cate {
        width:65%;
        margin:0 auto;
      }


    }
  }
</style>